<template>
	<view class="panel">
		<h2 class="title">热门</h2>
		<view class="content">
			<view v-for="item in state.groupProductList" class="body">
				<view class="header">
					<view class="section left">
						<text class="left-text">{{ item.keyword }}</text>
					</view>
					<view class="section right">
						<text class="right-text" @click="sheep.$router.go('/pages/goods/list', { keyword: item.keyword });">详细搜索></text>
					</view>
				</view>
				<view class="desc">
					{{ item.remark }}
				</view>
				<view class="product">
					<view v-for="product in item.productList" :key="product.id" @click="sheep.$router.go('/pages/goods/index', { id: product.id })" class="product-card">
						<view class="product-img">
							<img class="img" :src="sheep.$url.cdn(product.pic)"  alt=""/>
						</view>
						<view class="product-title">{{ product.name }}</view>
						<view class="product-price">{{ product.price }}日元</view>
					</view>
				</view>
			</view>
			<!--<view class="line-text footer">——我也是有底线的！——</view>-->
		</view>
	</view>
</template>


<script setup>

import {reactive} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import sheep from "@/sheep";

const state = reactive({
	groupProductList: []
})

onLoad(async () => {
	let hotRes = await sheep.$api.order.channelList({ type: 'hot_keyword' });
	console.log(hotRes)
	for (const item of hotRes) {
		const res = await sheep.$api.goods.list({ search: item.dictValue }, { page: 1, size: 3 });
		const { content } = res;
		let obj = {
			keyword: item.dictValue,
			remark: item.remark,
			productList: content
		}
		state.groupProductList.push(obj)
	}
})
</script>

<style scoped lang="scss">
.panel {
	display: flex;
	flex-direction: column;
	justify-content: left;
	width: 100%;
	background-color: #FFFFFF;
	//padding: 10rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx ;
	box-shadow: 1px 1px 20px #ececec;
	border-radius: 20rpx;


	.title {
		border-left: 5rpx solid #FE000F;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin: 10rpx;
	}
}

.content {
  margin-top: 20rpx;
  margin-bottom: 20rpx;

  .footer {
    color: #A6A6A6; margin-top: 100rpx;
    margin-bottom: 50rpx;
    font-size: 14px;
  }

  .body {
    width: 92.5%;
    height: 260px;
    opacity: 1;
    margin-top: 30rpx;
    box-shadow: 1px 1px 20px #ececec;
    margin-left: 0.8%;
    border-radius: 10px;
    background: #ffffff;
    padding: 20rpx 3% 3%;
    border: 1px solid #FE717D;
    display: flex;
    flex-direction: column;

    .header {
      flex: 1;
      display: flex;
      justify-content: center; /* 改为居中以便更好的控制 */
      align-items: center;
      width: 100%; /* 确保header占满整个宽度 */

      .section {
        display: flex;
        align-items: center;
        justify-content: center; /* 默认居中对齐，对于特殊的section将在下面覆盖 */

        &.left {
          margin-top: 5px;
          margin-left: 0px;
          justify-content: flex-start;
          flex: 1; /* 确保占满剩余空间 */
        }

        &.right {
          margin-top: 5px;
          margin-right: 5rpx;
          justify-content: flex-end; /* 右侧图片紧靠文本 */
          flex: 1; /* 确保占满剩余空间 */
        }

        &.center {
          flex: 0; /* 确保文本部分不伸展 */
        }

        .text-img {
          width: 58px;
          height: 27.75px;
          opacity: 1;
        }

        .left-text {
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0;
          line-height: 23.17px;
          color: rgba(0, 0, 0, 1);
          text-align: left;
          vertical-align: top;
        }

        .right-text {
          height: 18px;
          opacity: 1;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          text-decoration-line: underline;
          color: #F39800;
          text-align: left;
          vertical-align: top;
        }
      }
    }

    .desc {
      flex: 1.2;
      height: auto; // 自适应高度
      max-height: 35px * 2; // 最大高度为两行的高度
      opacity: 1;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 17.38px;
      color: rgba(128, 128, 128, 1);
      text-align: left;
      vertical-align: top;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 限制在两行
      -webkit-box-orient: vertical;
      overflow: hidden; // 隐藏溢出的文本
    }


	  .product {
		  flex: 3;
		  display: flex;
		  justify-content: space-between; // 三个产品卡片平均分布
		  height: 200px;

		  .product-card {
			  border: 1px solid #FE717D;
			  border-radius: 20rpx;
			  padding: 5rpx;
			  flex-basis: 30%; // 每个卡片占据容器宽度的大约三分之一
			  display: flex;
			  flex-direction: column;
			  align-items: center; // 子元素居中对齐

			  .product-img {
				  flex: 3;
				  width: 100%; // 图片容器占满卡片宽度
				  display: flex;
				  justify-content: center;
				  align-items: center;

				  .img {
					  border-radius: 20rpx;
					  width: 200rpx;
					  height: 220rpx;
					  margin: 0 auto;
				  }
			  }

			  .product-title {
				  flex: 2;
				  width: 100%;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  -webkit-box-orient: vertical;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  margin: 0; // 移除默认的margin
				  font-size: 13px;
				  font-weight: 400;
				  letter-spacing: 0;
				  line-height: 17.38px;
				  color: rgba(0, 0, 0, 1);
				  text-align: center;
				  vertical-align: top;
			  }

			  .product-price {
				  flex: 1;
				  font-size: 14px;
				  font-weight: 400;
				  letter-spacing: 0;
				  line-height: 26.06px;
				  color: rgba(255, 145, 145, 1);
				  text-align: left;
				  vertical-align: top;
			  }
		  }
	  }


  }
}
</style>
